Intro

Getting Started

Install & Setup Tailwind CLI

NPM Scripts & Output

Customizing & Config

Navigation Area + Spacing, Flex, Responsive Classes, etc

Hero Section

Class Name Order Convention

Features Section

Testimonial Section

CTA Section

Footer

Hamburger Menu HTML

Custom CSS (Background SVGs)

Custom CSS (Hamburger Menu)

Menu JavaScript

Deploy To InMotion Hosting

Sync to video time

In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git. ⭐ Sponsor: InMotion Hosting! https://bit.ly/3uVNhD6 💻 Code: https://github.com/bradtraversy/tailw... Frontend Mentor Challenge: https://www.frontendmentor.io/challen... Csaba Kissi Twitter (Tailwind Course Helper): https://twitter.com/csaba_kissi 👇 Website & Courses: https://traversymedia.com 💖 Show Support Patreon: https://www.patreon.com/traversymedia PayPal: https://paypal.me/traversymedia 👇 Follow Me On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtraversy Timestamps: 0:00 - Intro 2:45 - Getting Started 4:58 - Install & Setup Tailwind CLI 7:39 - NPM Scripts & Output 11:00 - Customizing & Config 13:25 - Navigation Area + Spacing, Flex, Responsive Classes, etc 24:06 - Hero Section 30:43 - Class Name Order Convention 33:44 - Features Section 44:58 - Testimonial Section 54:15 - CTA Section 59:34 - Footer 1:10:59 - Hamburger Menu HTML 1:15:38 - Custom CSS (Background SVGs) 1:19:45 - Custom CSS (Hamburger Menu) 1:25:08 - Menu JavaScript 1:28:27 - Deploy To InMotion Hosting

Intro

Getting Started

Install & Setup Tailwind CLI

NPM Scripts & Output

Featured playlist

Programming & Web Development Crash Courses

Tailwind Crash Course | Project From Scratch

172,974 views Apr 5, 2022 In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying

…

Show more

Show more

Intro

Getting Started

Install & Setup Tailwind CLI

NPM Scripts & Output

Customizing & Config

Navigation Area + Spacing, Flex, Responsive Classes, etc

Featured playlist

Programming & Web Development Crash Courses

1.92M subscribers

Comments

254

Thank you for the continuous content Brad! I wouldn’t be the developer I am today without your videos

Macho Man

Thank you for the continuous content Brad! I wouldn’t be the developer I am today without your videos

Waleed Mumtaz

4 months ago (edited)

Brad mentions about putting your Tailwind CSS classes such as sm, md, and lg at the end. There is a plugin by Tailwind Labs itself called "Prettier Plugin for Tailwind CSS". You can install this plugin in your project and it takes care of the sorting of your Tailwind classes.

·

Sajjad F

4 months ago (edited)

Special thanks to you, Brad for this extremely valuable and rare content.

Glen Allen

I love the longer videos actually completing something, really feels like you have something to work of. As always great video thanks Brad

Nicholas Robbins

I usually don't comment on videos but really want to say thank you Brad for the tremendous amount of work you're doing in the software community. Following along step-by-step with these projects really helps show what these frameworks can do. It's a big ask, but it would be amazing if we did a project like this in the future but completed additional pages so we had a legit 4-5 page website that would truly be a "Job Ready" project in the sense, like maybe show how we build this one page and then copy certain elements to create a Product page, or a About Us page that was fleshed out even more. Regardless, you're changing people's lives and I thank you immensely for the work you're doing dude!

Read more

Mohit Singh

Awesome video. Keep it coming. One suggestion, use the vs code extension for tailwind it will make your life much easier while development

Rodrigo Lima

The best tutorial about Tailwind ever! Thank you for providing us with this amazing content!!!

Redemple Marcelo

This is my favourite channel. I especially like it when you explain everything so nicely. I wish you a lot of success with the channel and happy life.

️

Charles De Barros

As always, outstanding content! We are very lucky in the development community to have people like you, generous, and willing to share content so as everyone can learn. Thank you.

Bruna Contino

Thank you so much Brad! I have one small favor to ask: could you please update the codes for your Udemy courses? I think they are not valid anymore :/

Nils Koch

Great content! Your videos are making my life so much better and easier, thank you!

Anas Alhariri

Hi, Thank you so much for your great efforts. I really appreciate your tutorials. All the love and respect.

Chad Caldwell

This was fantastic. Learning rather than copying. Very well done. Hope you do more.

Elegant Coder

Finished this course it was amazing Brad is a great teacher

LunarCodes

This channel has helped me ALOT in learning how to code, literally cannot believe that these videos are free. Keep up the good vids brotha

codewithfarhad

great content as always but this leaves so much to be desired. please make a udemy course on tailwindcss alone!

Ryzle Salt

This was an awesome tutorial, loved it!

juwono USK

Thank you for the amazing tutorial. This is the great explanation and easy for understanding video about tailwind css that I've seen.

Tech_tips01

Really, I just decided to start using tailwind, and you immediately made a video, you basically teached me all about web development in less than 2 years thank you very much

Misheru

Thank you for this project, i was able to learn a lot from it !